<%@ page contentType="text/html;charset=UTF-8"%>
<%@include file="/page/tag.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
	<head>
		<title>流程展现</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<meta http-equiv="Cache-Control" content="no-store"/>
		<meta http-equiv="Pragma" content="no-cache"/>
		<meta http-equiv="Expires" content="0"/>
		
		<link rel="stylesheet" href="${ctx}/page/flow/styles/css/snaker.css" type="text/css" media="all" />
		<script src="${ctx}/page/flow/styles/js/raphael-min.js" type="text/javascript"></script>
		<script src="${ctx}/page/flow/styles/js/jquery-ui-1.8.4.custom/js/jquery.min.js" type="text/javascript"></script>
		<script src="${ctx}/page/flow/styles/js/jquery-ui-1.8.4.custom/js/jquery-ui.min.js" type="text/javascript"></script>
		<script src="${ctx}/page/flow/styles/js/snaker/dialog.js" type="text/javascript"></script>
		<script src="${ctx}/page/flow/styles/js/snaker/snaker.designer.js" type="text/javascript"></script>
		<script src="${ctx}/page/flow/styles/js/snaker/snaker.model.js" type="text/javascript"></script>
		<script src="${ctx}/page/flow/styles/js/snaker/snaker.editors.js" type="text/javascript"></script>
		
		<!--弹窗组件start-->
		<script type="text/javascript" src="${ctx}/QUI/libs/js/popup/drag.js"></script>
		<script type="text/javascript" src="${ctx}/QUI/libs/js/popup/dialog.js"></script>
		<!--弹窗组件end-->
		
		<script type="text/javascript">
			$(function() {
				
				var json="${process }";
				var model = "";
				if(json) {
					model=eval("(" + json + ")");
				}

				$('#snakerflow').snakerflow({
					basePath : "${ctx}/page/flow/styles/js/snaker/",
                    ctxPath : "${ctx}",
					restore : model,
                    formPath : "forms/",
					tools : {
						save : {
							onclick : function(data) {
								saveModel(data);
							}
						}
					}
				});
			});
			
			function saveModel(data) {
				//alert(data);
				$.ajax({
					type:'POST',
					url:"${ctx}/flow/process/deployXml.do",
					data:"model=" + data + "&id=${processId}",
					async: false,
					globle:false,
					error: function(){
						dAlert('提示', '数据处理错误！');
						return false;
					},
					success: function(data){
						if(data == true) {
							/* window.location.href = "${ctx}/snaker/process/list"; */
							dAlert('提示', '保存成功。');
							window.location.href = "${ctx}/flow/process/designer.html";
						} else {
							dAlert('提示', '数据处理错误！');
						}
					}
				});
			}
			
			
			function dAlert(title, content){
				var diag = new top.Dialog();
				diag.Title = title;
				diag.Width=250;
				diag.Height=80;
				diag.ShowButtonRow=true;
				diag.ShowCancelButton=false;
				diag.ButtonAlign="center";
				diag.InnerHtml='<div style="text-align:center; line-height: 88px; font-weight: bold; font-size: 12px; font-family: 宋体;">'+content+'</div>';
				diag.OKEvent = function(){
					diag.close();
				}
				diag.show();
			}
		</script>					
</head>
<body>
<div id="toolbox">
<div id="toolbox_handle">工具集</div>
<div class="node" id="save"><img src="${ctx}/page/flow/styles/js/snaker/images/save.gif" />&nbsp;&nbsp;保存</div>
<div>
<hr />
</div>
<div class="node selectable" id="pointer">
    <img src="${ctx}/page/flow/styles/js/snaker/images/select16.gif" />&nbsp;&nbsp;选择
</div>
<div class="node selectable" id="path">
    <img src="${ctx}/page/flow/styles/js/snaker/images/16/flow_sequence.png" />&nbsp;&nbsp;连线
</div>
<div>
<hr/>
</div>
<div class="node state" id="start" type="start"><img
	src="${ctx}/page/flow/styles/js/snaker/images/16/start_event_empty.png" />&nbsp;&nbsp;开始</div>
<div class="node state" id="end" type="end"><img
	src="${ctx}/page/flow/styles/js/snaker/images/16/end_event_terminate.png" />&nbsp;&nbsp;结束</div>
<div class="node state" id="task" type="task"><img
	src="${ctx}/page/flow/styles/js/snaker/images/16/task_empty.png" />&nbsp;&nbsp;任务</div>
<%-- <div class="node state" id="task" type="custom"><img
	src="${ctx}/page/flow/styles/js/snaker/images/16/task_empty.png" />&nbsp;&nbsp;机器节点</div> --%>
<%-- <div class="node state" id="task" type="subprocess"><img
	src="${ctx}/page/flow/styles/js/snaker/images/16/task_empty.png" />&nbsp;&nbsp;子流程</div> --%>
<div class="node state" id="fork" type="decision"><img
	src="${ctx}/page/flow/styles/js/snaker/images/16/gateway_exclusive.png" />&nbsp;&nbsp;decision</div>
<div class="node state" id="fork" type="fork"><img
	src="${ctx}/page/flow/styles/js/snaker/images/16/gateway_parallel.png" />&nbsp;&nbsp;fork</div>
<div class="node state" id="join" type="join"><img
	src="${ctx}/page/flow/styles/js/snaker/images/16/gateway_parallel.png" />&nbsp;&nbsp;join</div>
</div>

<div id="properties" style="top:10px">
	<div id="properties_handle">属性</div>
	<table class="properties_all" cellpadding="0" cellspacing="0">
	</table>
	<div>&nbsp;</div>
</div>

<div id="snakerflow"></div>
</body>
</html>
